// node包中找到的path
const path = require('path')
module.exports = {
  // 入口
  entry: './src/main.js',
  // 出口(一般写对象)
  output: {
    // 动态获取路径(因为要写绝对路径)
    // __dirname node上下文自带 全局变量(保存当前文件所在的路径)
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 只要涉及到url的东西会自动拼接dist
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        // (\.)对.进行转移 $表示结尾 匹配所有css文件
        test: /\.css$/,
        // style-loader负责将样式添加到DOM中
        // css-loader只负责将css文件进行加载,不负责解析
        // 使用多个loader时,是从右边向左边读取的
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' }
          // 相当于这样写:
          // ['style-loader','css-loader','less-loader']
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
        {
          loader: 'url-loader',
          options: {
            // 当加载的图片,小于limit时,会将图片编译成base64字符串形式
            // 当加载的图片,大于limit时,需要使用file-loader模块进行加载(会将图片进行打包放在dist里面了)
            limit: 110000,
            name: 'img/[name].[hash:8].[ext]'

          },
        }]
      },
      {
        test: /\.js$/,
        // exclude:排除
        // include:包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: [
          { loader: 'vue-loader' }
        ]
      }

    ]
  },
  // 引入依赖时候的处理
  resolve: {
    // 后缀扩展名省略
    extensions: ['.js', '.css', '.vue'],
    // alias:别名
    alias: {
      // $表示结尾
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}